import React ,{ Component }  from 'react'

import {Row,Col,Button,Steps,Input,Spin,message} from 'antd'

import {Link as Linko} from 'react-router-dom'

import Brief from './index'

import api from '../../common/request'

import '../../common/table.css'

const Step = Steps.Step;


export default class Generate extends Component{
  constructor(props){
		super(props);
		let len;
    if(localStorage.Temporarymaterial){
      len=JSON.parse(localStorage.Temporarymaterial).length
    }else{
      len=0
    }
    this.state={
      briefnum:len,
      oValue:'',
      templateNo:1,
      loading:false
		}
		
		this.inputChange=this.inputChange.bind(this)
		//简报生成
		this.gebraword=this.gebraword.bind(this)
  }
  //简报生成
  gebraword(){
		let temarr=JSON.parse(localStorage.Temporarymaterial).join(',')
		if(temarr.length<=0){
			return message.error('请选择素材')
		}
    this.setState({
      loading:true
    })
    api.gebraword(this.state.oValue,temarr,this.state.templateNo).then(res=>{
      if(res.data.success){
        this.setState({
          loading:false
				})  
        this.props.history.push('/briefList')
        localStorage.Temporarymaterial=[]
      }else{
				this.setState({
					loading:true
				})
        message.error(res.data.message)
      }
    })
  }
  link(url){
    this.props.history.push(url)
  }
	inputChange(e){
		this.setState({
			oValue:e.target.value
		})
	}
	//模板编号
	choIndex(index){
		this.setState({
			templateNo:Number(index)
		})
	}
  render(){
    return(
      <div className="brief step01">
        <div className="top">
            <div className="title">
              <span className="left-title">简报制作</span>
              <span className="right-title">半自动化生成或舆情分析报</span>
            </div>
            <div className="section">
              <Row>
                <Col span={18}>
                <p>如果您有更专业的简报需求,请点击联系<a>人工简报</a>服务</p>
                <div className="steps-con">
                  <div className="steps" style={{position: 'relative'}}>
                    <Steps  current={2}>
                      <Step title="" onClick={()=>this.link('/step01')}/>
                      <Step title="" onClick={()=>this.link('/step02')}/>
                      <Step title="" onClick={()=>this.link('/generate')}/>
                      <Step title="" />
                    </Steps>
                    </div>
                    <div className="step-info">
                      <div>步骤1-选择素材</div>
                      <div>步骤2-确认素材</div>
                      <div>步骤3-选择样式</div>
                      <div>步骤4-生成简报</div>
                    </div>
                </div>
                </Col>
                <Col span={6}>
                  <div className="generate">
                    <div className="num">
                      <p>{this.state.briefnum}</p>
                      <p>当前素材数</p>
                    </div>
                    <div className="c-btn">
                      <Button type="primary" onClick={this.gebraword}>生成简报</Button>
                      <Button><Linko to="/step02">进入素材库</Linko></Button>
                    </div>
                  </div>
                </Col>
              </Row>
            </div>
          </div>
          <div className="choose">
            <div className={this.state.loading?"loading isshow":'loading ishide'}>
            <Spin ></Spin> 
            <div>简报生成中....</div>
            </div>
            <div className="chose-top">
              <div className="chose-title">填写简报名称</div>
              <div><Input placeholder="请输入简报名称" style={{width:'385px'}} value={this.state.oValue} onChange={this.inputChange}/></div>
            </div>
            <div className="choose-con">
              <Brief choIndex={(index)=>this.choIndex(index)}></Brief>
            </div>
            
          </div>
      </div>
    )
  }
}